<template>
	<view class="bruce" id="conent">
		<ul class="bubble-bgwall">
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
		</ul>
		<view class="toptitle" @click="home">
			智能农业监控系统
		</view>
		<view class="showcontent">
			<view class="introduction">
				<scroll-view id="scrollview" scroll-y>
					<ul class="nonedevice" v-if="devicelist.length==0">
						<view class="nonedeviceinfo">
							暂无设备
						</view>
						<li @click="AddDevice">
							<span>添加设备</span>
							<view class="progress">
								<image src="../../static/add.png"></image>
							</view>
						</li>
					</ul>
					<ul class="device" v-if="devicelist.length>0">
						<li v-for="item in devicelist" :key="item.deviceid">
							<view class="progress">
								<view class="row">
									<text class="span1">设备名称：</text> <text class="span2">{{item.devicename}}</text>
								</view>
								<view class="row">
									<text class="span1">备注信息：</text> <text class="span2">{{item.deviceremarks}}</text>
								</view>
								<view class="row">
									<text class="span1">注册时间：</text> <text class="span2">{{item.createtime}}</text>
								</view>
							</view>
							<view class="Additional_information">
								<span @click="toRealtime(item.deviceid)">详情</span>
								<span @click="Editdevice(item.deviceid)">编辑</span>
								<span @click="delDevice(item.deviceid)">删除</span>
							</view>
						</li>
						<li @click="AddDevice">
							<span class="span">添加设备</span>
							<view class="progress">
								<image src="../../static/add.png"></image>
							</view>
						</li>
					</ul>
				</scroll-view>
			</view>
		</view>
		<view class="andshowcontent">
			<my-component :title="'设备列表'"></my-component>
			<view class="andintroduction">
				<view class="Refresh" @click="Refreshs">
					<image class="topRefresh" src="../../static/Refresh.png"></image>
				</view>
				<scroll-view id="andscrollview" scroll-y>


					<ul class="nonedevice" v-if="devicelist.length==0">
						<view class="nonedeviceinfo">
							暂无设备
						</view>
						<li @click="AddDevice">
							<span>添加设备</span>
							<view class="progress">
								<image src="../../static/add.png"></image>
							</view>
						</li>
					</ul>
					<ul class="device" v-if="devicelist.length>0">
						<li v-for="item in devicelist" :key="item.deviceid">
							<view class="progress">
								<view class="row">
									<text class="span1">设备ID：</text> <text class="span2">{{item.deviceid}}</text>
								</view>
								<view class="row">
									<text class="span1">设备名称：</text> <text class="span2">{{item.devicename}}</text>
								</view>
								<view class="row">
									<text class="span1">备注信息：</text> <text class="span2">{{item.deviceremarks}}</text>
								</view>
								<view class="row">
									<text class="span1">注册时间：</text> <text class="span2">{{item.createtime}}</text>
								</view>
							</view>
							<view class="Additional_information">
								<span @click="toRealtime(item.deviceid)">详情</span>
								<span @click="Editdevice(item.deviceid)">编辑</span>
								<span @click="delDevice(item.deviceid)">删除</span>
							</view>
						</li>
						<li @click="AddDevice">
							<span class="span">添加设备</span>
							<view class="progress">
								<image src="../../static/add.png"></image>
							</view>
						</li>
					</ul>
				</scroll-view>
			</view>
			<Bottom-component></Bottom-component>
		</view>
		<view class="righttop">
			<span @click="mypage">欢迎：{{userid}}</span>
		</view>
		<view class="winfroted-glass">
			<ul class="nav1">
				<li class="title1" @click="home">系统简介</li>
				<li class="title1" id="nav2">进入系统
					<ul id="nav3">
						<li class="title2" @click="Deviceinformation">设备信息</li>
						<li class="title2" @click="Realtime">设备详情</li>
						<li class="title2" @click="statisticanalysis">统计分析</li>
						<li class="title2" @click="prediction">实时数据</li>
						<li class="title2" @click="historydata">历史数据</li>
					</ul>
				</li>
				<li class="title1" @click="relatedTechnologies">相关技术</li>
				<li class="title1" @click="InsiteCommunity">进入社区</li>
				<li class="title1" @click="teamSpirit">团队风采</li>
				<li class="title1" @click="aboutUs">关于我们</li>
			</ul>
		</view>
	</view>
</template>

<script>
	import MyComponent from '../my-component/my-component.vue';
	import {
		myrequest
	} from '../../utils/request';
	import {
		formatDate
	} from "../../utils/time.js";
	import {
		VUE_APP_BASE_URL
	} from 'utils/request.js';
	export default {
		components: {
			MyComponent
		},
		data() {
			return {
				cssid: '',
				userid: 'itheima0001',
				devicelist: []
			}
		},
		onLoad(e) {
			this.cssid = e.cssid;
		},
		async mounted() {
			 this.loadData();  
		},
		methods: {
			async loadData() {  
			        try {  
			            await Promise.all([  
			                // this.draw(),  
			                this.getdevicelist()  
			            ]);  
			        } catch (error) {  
			            console.error('Error loading data:', error);  
			        }  
			    },  
			Refreshs(e) {
				this.getdevicelist()
			},
			//获取设备列表
			async getdevicelist() {
				let userid = uni.getStorageSync('userid')
				let username = uni.getStorageSync('username');
				this.userid = username
				// console.log(userid);
				if (userid === '') {
					alert('账号信息丢失，请重新登录')
					uni.navigateTo({
						url: '/pages/LoginRegister/LoginRegister?cssid=' + this.cssid
					})
				} else {
					let res = await myrequest({
						//await的作用为需要等待$myhttp请求成功后下执行下面的进程
						url: '/device/deviceList',
						data: {
							userid: userid,
							pageNum: 1,
							pageSize: 10
						},
						method: "POST",
					}).then(res => {
						if (Array.isArray(res.data.data)) {
							this.devicelist = res.data.data.map(item => {
								// 格式化时间戳
								item.createtime = formatDate(item.createtime * 1000);
								return item;
							});
						}
						this.devicelist = res.data.data
						uni.setStorageSync('deviceid', res.data.data[0].deviceid);
						uni.setStorageSync('devicename', res.data.data[0].devicename);
						uni.setStorageSync('deviceremarks', res.data.data[0].deviceremarks);
					});
				}

			},
			toRealtime(e) {
				let encodedCssId = encodeURIComponent(this.cssid);
				let encodedDeviceId = encodeURIComponent(e);
				uni.redirectTo({
					url: '/pages/Realtime/Realtime?cssid=' + encodedCssId + '&deviceid=' + encodedDeviceId
				});
			},
			delDevice(e) {
				let devcieid = e;
				let that = this
				// 保护操作
				uni.showModal({
					title: '提示',
					content: '您确定要删除改设备吗？删除后不可恢复哦',
					success: function(res) {
						if (res.confirm) {
							uni.request({
								url: VUE_APP_BASE_URL + '/device/deldevice',
								data: {
									deviceid: devcieid
								},
								header: {
									"Content-Type": "application/x-www-form-urlencoded"
								},
								method: "POST",
								success: (res) => {
									if (res.data.code == 200) {
										// console.log(res);
										/*如果验证服务器成功则执行成功提示*/
										uni.showToast({
											title: "删除成功",
											icon: 'success',
											duration: 1000
										});
										setTimeout(() => {
											// 跳转到设备列表
											that.getdevicelist();
										}, 1000);
									} else {
										uni.showToast({
											title: "删除失败",
											icon: 'error',
											duration: 2000
										});
									}
								}
							})
						} else if (res.cancel) {
							uni.showToast({
								title: "取消删除",
								icon: 'error',
								duration: 500
							});
						}
					}
				});

			},
			Editdevice(e) {
				let encodedCssId = encodeURIComponent(this.cssid);
				let encodedDeviceId = encodeURIComponent(e);
				uni.redirectTo({
					url: '/pages/Editdevice/Editdevice?cssid=' + encodedCssId + '&deviceid=' + encodedDeviceId
				});
			},
			AddDevice() {
				uni.redirectTo({
					url: '/pages/AddDevice/AddDevice?cssid=' + this.cssid
				})
			},
			mypage() {
				uni.redirectTo({
					url: '/pages/mypage/mypage?cssid=' + this.cssid
				})
			},
			historydata() {
				uni.redirectTo({
					url: '/pages/historydata/historydata?cssid=' + this.cssid
				})
			},
			prediction() {
				uni.redirectTo({
					url: '/pages/prediction/prediction?cssid=' + this.cssid
				})
			},
			statisticanalysis() {
				uni.redirectTo({
					url: '/pages/statisticanalysis/statisticanalysis?cssid=' + this.cssid
				})
			},
			Realtime() {
				uni.redirectTo({
					url: '/pages/Realtime/Realtime?cssid=' + this.cssid
				})
			},
			Deviceinformation() {
				uni.redirectTo({
					url: '/pages/Deviceinformation/Deviceinformation?cssid=' + this.cssid
				})
			},
			teamSpirit() {
				uni.reLaunch({
					url: '/pages/teamSpirit/teamSpirit?cssid=' + this.cssid
				})
			},
			InsiteCommunity() {
				uni.redirectTo({
					url: '/pages/InsiteCommunity/InsiteCommunity?cssid=' + this.cssid
				})
			},
			relatedTechnologies() {
				uni.redirectTo({
					url: '/pages/relatedTechnologies/relatedTechnologies?cssid=' + this.cssid
				})
			},
			aboutUs() {
				uni.redirectTo({
					url: '/pages/aboutUs/aboutUs?cssid=' + this.cssid
				})
			},
			forgotpassword(e) {
				uni.redirectTo({
					url: '/pages/forgotpassword/forgotpassword?cssid=' + this.cssid
				})
			},
			home() {
				uni.redirectTo({
					url: '/pages/home/home'
				})
			},
			draw(e) {
				let themes = document.querySelector('.bruce');
				let color = document.querySelectorAll(".bubble")
				if (this.cssid == 1) {
					this.button = false;
					this.title = "白天模式"
					this.cssid = 1
					themes.style.background = 'linear-gradient(270deg, #0a0b35, #120144)'
					color.forEach(function(element) {
						element.style.color = '#83c0f7'
					});

				} else {
					this.title = "夜间模式"
					this.button = true;
					this.cssid = 0
					themes.style.background = 'linear-gradient(270deg, #819cad, #81a5bd)'
					color.forEach(function(element) {
						element.style.color = '#6661e6'
					});

				}
			}

		}
	}
</script>

<style lang="scss">
	@media screen and (min-width:640px) {
		#conent {
			background: #030812 !important;

			.toptitle {
				position: fixed;
				margin-left: 5px;
				width: 100%;
				padding: 20px;
				z-index: 12;
				font-size: 24px;
				font-family: "楷体", sans-serif;
				top: 0px;
				font-weight: bold;
				color: #d8d8d8;
				left: 0;
				display: block;
				background: #393d49;
				background-image: url('https://gd-hbimg.huaban.com/23c7d4ff432744f58bbd2087eb6745a4f66d95c757996-Z6BbHB_fw1200');
				background-repeat: no-repeat;
				background-size: 100vw;
			}

			.righttop {
				position: fixed;
				margin-left: 5px;
				width: 50%;
				padding: 20px 40px 20px 0;
				z-index: 12;
				font-size: 24px;
				font-family: "楷体", sans-serif;
				top: 0;
				font-weight: bold;
				color: #d8d8d8;
				right: 0;
				display: block;
				text-align: right;
				background: transparent;

				span {
					&:hover {
						color: #009688;
					}
				}
			}

			.showcontent {
				background: rgba(255, 255, 255, 0.5);
				z-index: 10;
				display: block;
				justify-content: center;
				position: fixed;
				left: 0;
				margin: 0 50px 0 50px;
				width: 100%;
				height: 100%;
				backdrop-filter: blur(3px);

				.introduction {
					background-color: rgba(0, 0, 0, 0.126);
					display: block;
					overflow: hidden;
					box-sizing: border-box;
					position: relative;
					margin-top: 120px;
					margin-left: 120px;
					margin-right: 100px;
					padding: 20px;
					border-radius: 5px;

					#scrollview {
						width: 100%;
						height: 80vh;
						background-color: transparent;

						.nonedevice {
							display: grid;
							grid-template-columns: repeat(1, 1fr);
							justify-items: center;
							list-style-type: none;
							padding: 0;
							box-sizing: border-box;

							li {
								padding: 10px;
								margin: 10px auto;
								border-radius: 5px;
								width: 300px;
								height: 180px;
								background-image: linear-gradient(to top right, #646464, #4a939e);
								overflow: hidden;

								span {
									display: block;
									text-align: center;
									width: 100px;
									padding: 10px;
									margin: 0 auto;
									background-color: transparent;
								}

								.progress {
									margin: auto;
									padding: 10px;
									width: 100%;
									background-color: transparent;
									display: grid;
									grid-template-columns: repeat(1, 1fr);
									justify-items: center;

									image {
										width: 100px;
										height: 100px;
										background-color: #fff;
										border-radius: 50%;
									}
								}

								&:hover {
									// background-color: rgba(194, 252, 252, .13);
									box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.157), 0 1.7px 2.6px rgba(0, 0, 0, 0.224), 0 3.5px 5.3px rgba(0, 0, 0, 0.28), 0 7.3px 11px rgba(0, 0, 0, 0.346), 0 20px 30px rgba(0, 0, 0, 0.5);
								}
							}
						}

						.device {
							display: grid;
							grid-template-columns: repeat(3, 1fr);
							justify-items: center;
							list-style-type: none;
							padding: 0;
							box-sizing: border-box;

							li {
								width: 350px;
								padding: 10px;
								margin: 10px;
								border-radius: 5px;
								height: 170px;
								font-size: 18px;
								background-image: linear-gradient(to top right, rgba(96, 191, 234, .16), #4a939e);
								overflow: hidden;

								.row {
									background-color: transparent;
									width: 100%;
									display: block;
									display: flex;
									text-align: left;
									justify-content: safe;
									padding: 5px;
									overflow: hidden;
									// margin: auto;

									.span1 {
										width: 100px;
										position: relative;
										font-weight: bold;
										left: 0px;
										float: left;
										font-size: 18px;
										display: inline-block;
										text-align: justify;
										text-justify: distribute-all-lines;
										text-align-last: justify;
										color: rgb(51, 51, 51);
									}

									.span2 {
										width: 230px;
										text-align: left;
										white-space: nowrap;
										/* 防止文字换行 */
										color: #ebebeb;
										overflow: hidden;
										/* 隐藏溢出容器的内容 */
										text-overflow: ellipsis;
										/* 使用省略号表示溢出的文字 */
									}
								}


								span {
									display: block;
									text-align: center;
									width: 100px;
									padding: 10px;
									margin: 0 auto;
									color: #ebebeb;
									background-color: transparent;
								}

								.progress {
									margin: auto;
									padding: 10px;
									width: 100%;
									background-color: transparent;
									display: grid;
									grid-template-columns: repeat(1, 1fr);
									justify-items: center;

									.span {
										text-align: center;
									}

									image {
										width: 100px;
										height: 100px;
										background-color: #fff;
										border-radius: 50%;
									}
								}

								.Additional_information {
									display: none;

									span {
										display: none;
									}
								}

								&:hover {
									// background-color: rgba(194, 252, 252, .13);
									box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.157), 0 1.7px 2.6px rgba(0, 0, 0, 0.224), 0 3.5px 5.3px rgba(0, 0, 0, 0.28), 0 7.3px 11px rgba(0, 0, 0, 0.346), 0 20px 30px rgba(0, 0, 0, 0.5);

									.Additional_information {
										display: grid;
										grid-template-columns: repeat(3, 1fr);
										width: 100%;
										position: relative;
										height: 30px;
										bottom: -15px;
										overflow: hidden;
										left: 0px;
										z-index: 10;
										border-radius: 5px;
										animation: fadeIn .5s ease-in-out forwards;


										span {
											display: block;
											width: 100px;
											padding-bottom: 10px;
											height: 30px;
											text-align: center;
											align-items: center;
											line-height: 30px;
											border-right: 2px solid #cccccc;
											font-size: 15px;
											background-image: linear-gradient(to top left, #2a2a2a, #14292c);
											transform: translateY(-11px);

											&:last-child {
												border: none;
											}
										}

										@keyframes fadeIn {
											0% {
												opacity: 0;
												transform: translateY(20px);
											}

											100% {
												opacity: 1;
											}
										}

									}
								}

							}
						}

					}


				}

			}

			.andshowcontent {
				display: none;
			}

			.winfroted-glass {
				background-color: transparent;
				z-index: 10;
				width: 140px;
				display: flex;
				position: fixed;
				left: 0px;
				top: 10px;

				.nav1 {
					margin-top: 30px;
					width: 120px;
					height: 100vh;
					background-color: #393d49;
					position: relative;
					display: block;
					margin-left: 5px;
					box-sizing: border-box;
					padding: 50px 0 0 0;
					border-left: 5px solid #222e6f;
					justify-content: center;
					text-align: center;

					.title1 {
						width: 100%;
						margin: 10px auto;
						padding: 10px 0;
						list-style: none;
						text-align: center;
						color: #d8d8d8;
						transition: background-color 0.3s ease;

						&:hover {
							background: #009688;
							border-right: #ffffff 2px solid;
							cursor: pointer;
						}
					}

					.title1:nth-child(2) {
						#nav3 {
							display: none;
							overflow: hidden;
							box-sizing: border-box;
						}

						&:hover {
							#nav3 {
								display: block;
								position: relative;
								margin-top: 10px;
								left: 0px;
								width: 100%;

								.title2 {
									width: 100%;
									left: -14px;
									margin: 10px auto;
									position: relative;
									padding: 10px 0;
									list-style: none;
									display: block;
									text-align: center;
									transition: background-color 0.3s ease;

									&:hover {
										display: block;
										width: 100%;
										margin: 10px auto;
										padding: 10px 0;
										list-style: none;
										display: block;
										text-align: center;
										background: linear-gradient(to left, #9cd3d3, #008174) no-repeat right bottom;
										background-size: 90% 2px;
										transition: background-size 0.3s;
									}
								}

								&:hover {
									background: #008174;
								}
							}
						}
					}


				}

			}
		}
	}

	.bruce {
		background-image: linear-gradient(270deg, #819cad, #81a5bd);
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;

		.showcontent {
			display: none;
		}

		.andshowcontent {
			z-index: 10;
			display: block;
			justify-content: center;
			position: fixed;
			margin: 0 50px 0 50px;
			width: 100%;
			height: 100%;

			.Refresh {
				display: block;
				position: relative;
				padding: 10px;
				bottom: -80vh;
				width: 50px;
				height: 50px;
				z-index: 10;
				right: 10px;
				float: right;
				background-color: rgba(67, 230, 244, 0.2);
				overflow: hidden;
				border-radius: 50%;
				box-sizing: border-box;
				filter: drop-shadow(1px 1px 20px #60fff5);

				.topRefresh {
					width: 100%;
					height: 100%;
				}

			}

			.andintroduction {
				background-color: rgba(0, 0, 0, 0.426);
				backdrop-filter: blur(2px);
				display: block;
				overflow: hidden;
				box-sizing: border-box;
				position: relative;
				margin-top: 10vh;
				margin-left: 0px;
				margin-right: 0px;
				bottom: 63px;
				padding: 10px;
				overflow: hidden;

				#andscrollview {
					width: 100%;
					padding-top: 60px;
					height: 90vh;
					padding-bottom: 5px;
					box-sizing: border-box;
					color: #eaeaea;
					font-size: 18px;
					background-color: transparent;

					.nonedevice {
						display: grid;
						grid-template-columns: repeat(1, 1fr);
						justify-items: center;
						list-style-type: none;
						padding: 0;
						box-sizing: border-box;

						li {
							padding: 10px;
							margin: 10px auto;
							border-radius: 5px;
							width: 300px;
							height: 180px;
							background-image: linear-gradient(to top right, #646464, #4a939e);
							overflow: hidden;

							span {
								display: block;
								text-align: center;
								width: 100px;
								padding: 10px;
								margin: 0 auto;
								background-color: transparent;
							}

							.progress {
								margin: auto;
								padding: 10px;
								width: 100%;
								background-color: transparent;
								display: grid;
								grid-template-columns: repeat(1, 1fr);
								justify-items: center;

								image {
									width: 100px;
									height: 100px;
									background-color: #fff;
									border-radius: 50%;
								}
							}

							&:hover {
								// background-color: rgba(194, 252, 252, .13);
								box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.157), 0 1.7px 2.6px rgba(0, 0, 0, 0.224), 0 3.5px 5.3px rgba(0, 0, 0, 0.28), 0 7.3px 11px rgba(0, 0, 0, 0.346), 0 20px 30px rgba(0, 0, 0, 0.5);
							}
						}
					}

					.device {
						display: grid;
						grid-template-columns: repeat(1, 1fr);
						justify-items: center;
						list-style-type: none;
						padding: 0;
						box-sizing: border-box;

						li {
							width: 300px;
							padding: 10px;
							margin: 10px auto;
							border-radius: 5px;
							// height: 180px;
							background-image: linear-gradient(to top right, rgba(80, 92, 170, .16), #4a939e);
							overflow: hidden;

							.row {
								background-color: transparent;
								width: 100%;
								display: block;
								display: flex;
								text-align: left;
								justify-content: safe;
								padding: 5px;
								overflow: hidden;
								// margin: auto;

								.span1 {
									width: 100px;
									position: relative;
									font-weight: bold;
									left: 0px;
									font-size: 16px;
									font-weight: bold;
									float: left;
									color: rgb(51, 51, 51);
									display: inline-block;
									text-align: justify;
									text-justify: distribute-all-lines;
									text-align-last: justify;
									z-index: 10;
								}

								.span2 {
									
									width: 180px;
									text-align: left !important;
									white-space: nowrap;
									/* 防止文字换行 */
									overflow: hidden;
									/* 隐藏溢出容器的内容 */
									text-overflow: ellipsis;
									/* 使用省略号表示溢出的文字 */
								}
							}


							span {
								display: block;
								text-align: center;
								width: 100px;
								padding: 10px;
								margin: 0 auto;
								background-color: transparent;
							}

							.progress {
								margin: auto;
								padding: 10px;
								width: 100%;
								background-color: transparent;
								display: grid;
								grid-template-columns: repeat(1, 1fr);
								justify-items: center;

								.span {
									text-align: center;
								}

								image {
									width: 100px;
									height: 100px;
									background-color: #fff;
									border-radius: 50%;
								}
							}

							.Additional_information {
								display: none;

								span {
									display: none;
								}
							}

							&:hover {
								// background-color: rgba(194, 252, 252, .13);
								box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.157), 0 1.7px 2.6px rgba(0, 0, 0, 0.224), 0 3.5px 5.3px rgba(0, 0, 0, 0.28), 0 7.3px 11px rgba(0, 0, 0, 0.346), 0 20px 30px rgba(0, 0, 0, 0.5);

								.Additional_information {
									display: grid;
									grid-template-columns: repeat(3, 1fr);
									width: 100%;
									position: relative;
									height: 30px;
									bottom: 0px;
									overflow: hidden;
									left: 0px;
									z-index: 10;
									border-radius: 5px;
									background-image: linear-gradient(to top left, #2a2a2a, #14292c);
									animation: fadeIn .5s ease-in-out forwards;


									span {
										display: block;
										width: 5em;
										padding-bottom: 10px;
										height: 30px;
										text-align: center;
										align-items: center;
										line-height: 30px;
										border-right: 2px solid #cccccc;
										font-size: 15px;
										background-image: linear-gradient(to top left, #2a2a2a, #14292c);
										transform: translateY(-11px);

										&:last-child {
											border: none;
										}
									}

									@keyframes fadeIn {
										0% {
											opacity: 0;
											transform: translateY(20px);
										}

										100% {
											opacity: 1;
										}
									}

								}
							}

						}
					}

				}
			}
		}

		.winfroted-glass {
			display: none;
		}

		.toptitle {
			display: none;
		}

		.righttop {
			display: none;
		}

		@media (max-width: 640px) {
			.frosted-glass .title {
				font-size: 2em;
			}
		}
	}

	.bubble-bgwall {
		position: relative;
		width: 100%;
		height: 100%;
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.bubble {
		display: flex;
		position: absolute;
		bottom: -200px;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		width: 50px;
		height: 50px;
		background-color: rgba(255, 255, 255, 0.15);
		color: #44397a;
		animation: bubble 15s infinite;
	}

	.bubble:nth-child(1) {
		left: 10%;
	}

	.bubble:nth-child(2) {
		left: 20%;
		width: 90px;
		height: 90px;
		animation-duration: 7s;
		animation-delay: 2s;
	}

	.bubble:nth-child(3) {
		left: 25%;
		animation-delay: 4s;
	}

	.bubble:nth-child(4) {
		left: 40%;
		width: 60px;
		height: 60px;
		background-color: rgba(255, 255, 255, 0.3);
		animation-duration: 8s;
	}

	.bubble:nth-child(5) {
		left: 70%;
	}

	.bubble:nth-child(6) {
		left: 80%;
		width: 120px;
		height: 120px;
		background-color: rgba(255, 255, 255, 0.2);
		animation-delay: 3s;
	}

	.bubble:nth-child(7) {
		left: 32%;
		width: 160px;
		height: 160px;
		animation-delay: 2s;
	}

	.bubble:nth-child(8) {
		left: 55%;
		width: 40px;
		height: 40px;
		font-size: 12px;
		animation-duration: 15s;
		animation-delay: 4s;
	}

	.bubble:nth-child(9) {
		left: 25%;
		width: 40px;
		height: 40px;
		background-color: rgba(255, 255, 255, 0.3);
		font-size: 12px;
		animation-duration: 12s;
		animation-delay: 2s;
	}

	.bubble:nth-child(10) {
		left: 85%;
		width: 160px;
		height: 160px;
		animation-delay: 5s;
	}

	@keyframes bubble {
		0% {
			opacity: 0.5;
			transform: translateY(0) rotate(45deg);
		}

		25% {
			opacity: 0.75;
			transform: translateY(-400px) rotate(90deg);
		}

		50% {
			opacity: 1;
			transform: translateY(-600px) rotate(135deg);
		}

		100% {
			opacity: 0;
			transform: translateY(-1000px) rotate(180deg);
		}
	}

	@keyframes code {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}
</style>